.swiper-container {
  width: 100%;
  height: 242px;
  position: relative;
  overflow: hidden;

  .swiper {
    position: absolute;
    height: 242px;

    display: grid;
    .swiper-item {
      grid-column: calc(var(--swiper-item-index) + 1) / span 1;
      width: 214px;
      background: linear-gradient(90deg, #fefcf9, #fcf2e3 100%);
      border-radius: 8px;

      transition: scale 0.5s ease-in-out;

      display: grid;
      grid-template:
        'current-level-text' 16px
        '.' 18px
        'icon' min-content
        'title' min-content
        '.' 15px
        'tip' min-content
        / 1fr;
      place-items: center;
      padding: 6px 8px 12px;

      position: relative;

      // 超过10级的样式
      &.above-level-10 {
        background: none;
      }

      // 在正中间的样式
      &.not-current {
        transform: scale(0.9);
      }

      // 未解锁的等级的样式
      &.locked {
        background: linear-gradient(90deg, #fefcf9, #fcf2e3 100%);
        filter: grayscale(100%);

        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 0.5);
          border-radius: 8px;
        }
      }

      .bg {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
      }

      .current-level-text {
        grid-area: current-level-text;
        justify-self: start;

        font-size: 12px;
        color: #3a0000;
      }

      .level-icon {
        grid-area: icon;
        width: 95px;
        height: 97px;
      }

      .title {
        grid-area: title;
        color: #3a0000;
        font-size: 20px;
        font-weight: bold;
      }

      .next-level-tip {
        grid-area: tip;
        color: #360000;
        font-size: 10px;
        text-align: center;
      }
    }
  }
}
